<!DOCTYPE html>
<html lang="en">
 <head>
  <title> New Document </title>

 <style type="text/css">
     #target { padding: 5px;
               border: 1px solid #000;
               width:200px;
               float:right }
     body {
         font-size: 13px;
     }
 </style>
 <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
 <link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
 <script type="text/javascript" src="Jquery1.5.2.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
 <script type="text/javascript" src="assets/prettify.js"></script>
 <script type="text/javascript" src="jquery-ui.min.js"></script>
 <script type="text/javascript" src="jquery.multiselect.js"></script>



 <script type="text/javascript">
     $(function(){

         $("#box1").multiselect({
             noneSelectedText: "==请选择==",
             checkAllText: "全选",
             uncheckAllText: '全不选',
             selectedList: [4]/*,//最多显示几个

             selectedText: function(numChecked, numTotal, checkedItems){

                 $.each(checkedItems[0],function(k,v){
                     //这里是处理 obj 的函数
                     if(k='value'){
                      // alert(k+':'+v);
                     }
                 });
                 //alert(checkedItems);
                 return numChecked + ' of ' + numTotal + ' checked';
             }*/
         });
         $("#box2").multiselect({
             show: ["bounce", 200],
             hide: ["explode", 1000]
         });
         $("#box3").multiselect({
             show: "bounce",
             hide: "explode"
         });

     });
     /*
     //alert($("#target").length);
     var target = $("#target");

     $("select").multiselect().bind("multiselectclick multiselectcheckall multiselectuncheckall", function( event, ui ){
                 var checkedValues = $.map($(this).multiselect("getChecked"), function( input ){
                     alert(input.value);
                     return input.value;
                 });

                 // update the target based on how many are checked
                 target.html(
                         checkedValues.length ? checkedValues.join(', ') : 'Please select a checkbox'
                 );
             }).triggerHandler("multiselectclick"); // trigger above logic when page first loads
     */
function showValues() {
//var str = $("#box1").multiselect("MyValues");
    var values = $("#box1").val();
    var array_of_checked_values = $("#box1").multiselect("getChecked").map(function(){
        return this.value;
    }).get();
    alert(values);
    alert(array_of_checked_values);
    //$("#box1").val()="1,2,3";
}
 </script>
 </head>
 <body>
  <select multiple="multiple"  id="box1">
      <option value="1">Option 1</option>
      <option value="5">Option 2</option>
      <option value="7">Option 3</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
  </select>
  <select multiple="multiple" id="box2">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
  </select>
  <select multiple="multiple" id="box3">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="7">Option 7</option>
      <option value="8">Option 8</option>
      <option value="9">Option 9</option>
      <option value="10">Option 10</option>
  </select>
  <button value="测试" onclick="showValues()">测试</button>
 <div id="target"></div>
 </body>
<script>
    //$("#box1").val(1);
    //$("#box1").val(2);
    //$("#box1").val(3);
    //$("#box1").values="1,2,3";
    //$("#box1 option:nth-child(1), select option:nth-child(3)").attr("selected", "selected");
    /*
    for(var a=0;a<$("#box1").length;a++){
       alert($("#box1").options[a].val());
       if($("#box1").options[a].val()==1){
           $("#box1").options[a].attr("selected", "selected");
       }
    }*/

    var daystrs= new Array();
    daystrs = String("1,7").split(",");
    $("#box1").each(function(){
        $(this).children("option").each(function(){
            //alert($(this).text())//每一个option
            //alert($(this).text()+"属于id为"+$(this).parent("select").attr("id")+"的select");
            /*
            if($(this).val()==1 || $(this).val()==7){
                $(this).attr("selected", "selected");
            }*/

            for(var b=0;b<=daystrs.length;b++){
                if($(this).val()==daystrs[b]){
                    $(this).attr("selected", "selected");
                }
            }
        });
    });
    //$("#box1 option:nth-child(1)").attr("selected", "selected");
    //$("#box1 option:nth-child(1),#box1 option:nth-child(3)").attr("selected", "selected");
    //$("#box1").multiselect("refresh");
    //$("#box1").MyValues="1,2,3";

</script>
</html>
